<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>介入手术机器人控制系统</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="container">
        <!-- 标题 -->
        <header>
            <div class="header-top">
                <h1>介入手术机器人控制系统</h1>
                <button id="btn-settings" class="btn-settings" title="设置">
                    <span class="gear-icon">⚙️</span>
                </button>
            </div>
            <p id="status" class="status-disconnected">连接状态: 未连接</p>
        </header>

        <!-- 主要内容区域 -->
        <div class="main-content">
            <!-- DSA影像窗口 -->
            <div class="dsa-window">
                <h2>DSA实时影像</h2>
                <div class="video-container">
                    <img id="dsa-video" src="" alt="DSA实时影像" class="dsa-video">
                    <canvas id="dsa-canvas" width="600" height="400" class="dsa-canvas" style="display:none;"></canvas>
                </div>
                <div class="dsa-info">
                    <p>实时医学影像窗口</p>
                </div>
            </div>

            <!-- 控制面板 -->
            <div class="control-panel">
                <h2>机器人控制面板</h2>
                
                <!-- 导丝控制 -->
                <div class="control-section">
                    <h3>导丝控制</h3>
                    <div class="control-group">
                        <label for="guidewire-speed">速度:</label>
                        <input type="range" id="guidewire-speed" min="0" max="100" value="20" class="slider">
                        <span id="guidewire-speed-value">20</span>
                    </div>
                    
                    <div class="button-group">
                        <button class="btn btn-success" id="btn-push-guidewire">
                            <span class="btn-icon">⬇</span>
                            推送导丝
                        </button>
                        <button class="btn btn-warning" id="btn-retract-guidewire">
                            <span class="btn-icon">⬆</span>
                            撤回导丝
                        </button>
                    </div>

                    <div class="button-group">
                        <button class="btn btn-primary" id="btn-rotate-cw">
                            <span class="btn-icon">↻</span>
                            顺时针旋转
                        </button>
                        <button class="btn btn-primary" id="btn-rotate-ccw">
                            <span class="btn-icon">↺</span>
                            逆时针旋转
                        </button>
                    </div>
                    <div class="button-group">
                        <button class="btn btn-primary" id="btn-rotate-cw-push">
                            <span class="btn-icon">↻⬇</span>
                            顺时针旋转并推进
                        </button>
                        <button class="btn btn-primary" id="btn-rotate-ccw-push">
                            <span class="btn-icon">↺⬇</span>
                            逆时针旋转并推进
                        </button>
                    </div>
                </div>

                <!-- 导管控制 -->
                <div class="control-section">
                    <h3>导管控制</h3>
                    <div class="control-group">
                        <label for="catheter-speed">速度:</label>
                        <input type="range" id="catheter-speed" min="0" max="100" value="15" class="slider">
                        <span id="catheter-speed-value">15</span>
                    </div>

                    <div class="button-group">
                        <button class="btn btn-info" id="btn-push-catheter">
                            <span class="btn-icon">⬇</span>
                            推送导管
                        </button>
                        <button class="btn btn-warning" id="btn-retract-catheter">
                            <span class="btn-icon">⬆</span>
                            撤回导管
                        </button>
                    </div>
                </div>

                <!-- 全局控制 -->
                <div class="control-section">
                    <h3>全局控制</h3>
                    <div class="button-group">
                        <button class="btn btn-danger" id="btn-stop-all">
                            <span class="btn-icon">⏹</span>
                            紧急停止
                        </button>
                        <button class="btn btn-secondary" id="btn-ping">
                            <span class="btn-icon">🔄</span>
                            检测连接
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 日志窗口 -->
        <div class="log-window">
            <h3>操作日志</h3>
            <div id="log-content" class="log-content"></div>
            <button id="btn-clear-log" class="btn btn-light">清空日志</button>
        </div>
    </div>

    <!-- 设置模态对话框 -->
    <div id="settings-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>设置</h2>
                <button class="modal-close" id="btn-close-settings">&times;</button>
            </div>
            <div class="modal-body">
                <!-- 串口设置 -->
                <div class="settings-section">
                    <h3>串口配置</h3>
                    <div class="settings-group">
                        <label for="com-port-input">COM 端口号:</label>
                        <input type="text" id="com-port-input" placeholder="例如: COM3 或 /dev/ttyUSB0" class="settings-input">
                        <button class="btn btn-primary" id="btn-save-com-port">保存串口设置</button>
                    </div>
                </div>

                <!-- 视频流设置 -->
                <div class="settings-section">
                    <h3>视频流配置</h3>
                    <div class="settings-group">
                        <label for="video-stream-input">视频流地址:</label>
                        <input type="text" id="video-stream-input" placeholder="例如: http://192.168.1.100:8080/?action=snapshot" class="settings-input">
                        <div class="settings-hint">默认: http://&lt;ip&gt;:&lt;port&gt;/?action=snapshot</div>
                        <button class="btn btn-primary" id="btn-save-video-stream">保存视频流设置</button>
                    </div>
                </div>

                <!-- 显示当前配置 -->
                <div class="settings-section">
                    <h3>当前配置</h3>
                    <div class="current-settings">
                        <p><strong>COM 端口:</strong> <span id="current-com-port">未设置</span></p>
                        <p><strong>视频流:</strong> <span id="current-video-stream">未设置</span></p>
                    </div>
                </div>

                <!-- 端口扫描 -->
                <div class="settings-section">
                    <h3>扫描端口</h3>
                    <div class="settings-group">
                        <p>点击 "扫描端口" 将在服务器上运行系统检测命令并显示结果（lsusb、/dev/serial/by-id 与串口列表）。</p>
                        <button class="btn btn-outline" id="btn-scan-ports">扫描端口</button>
                    </div>
                    <div class="settings-group">
                        <label for="scan-output">扫描输出:</label>
                        <textarea id="scan-output" class="settings-textarea" rows="8" readonly placeholder="扫描结果将显示在这里..."></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" id="btn-cancel-settings">关闭</button>
            </div>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>
